<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>用户管理</title>
  <!-- Bootstrap core CSS-->
  <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom fonts for this template-->
  <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template-->
  <link href="/static/css/sb-admin.css" rel="stylesheet">
  <!-- Map styles -->
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>

    <body class="fixed-nav sticky-footer bg-dark" id="page-top">
    <!-- Navigation-->
    {% include 'navbar.html' %}
        <style type="text/css">
    .nav-item {
        padding: 0 10px; /* 调整这个值来增加或减少间距 */
    }
    </style>
  <div class="content-wrapper">
    <div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">用户管理</li>
      </ol>

    <!-- User Profile Table -->
<!--    <div class="card">-->
<!--      <div class="card-header">-->
<!--        用户信息-->
<!--      </div>-->
      <div class="card-body">
        <!-- 添加了 table-bordered 和 table-striped 类 -->
        <table class="table table-hover table-bordered table-striped">
          <thead>
            <tr>
              <th>信息项</th>
              <th>详情</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">用户名</th>
              <td id="username-display">Username</td>
              <td><button type="button" class="btn btn-link" id="modifyUsername">修改</button></td>
            </tr>
            <tr>
              <th scope="row">邮箱</th>
              <td id="email-display">Email@example.com</td>
              <td><button type="button" class="btn btn-link" id="modifyEmail">修改</button></td>
            </tr>
            <tr>
              <th scope="row">密码</th>
              <td id="password-display">********</td>
              <td><button type="button" class="btn btn-link" id="modifyPassword">修改</button></td>
            </tr>
            <tr>
              <th scope="row">我关注的城市</th>
              <td id="cities-display">无</td>
              <td>
                <button type="button" class="btn btn-link" id="addCity">添加</button>
                <button type="button" class="btn btn-link" id="removeCity">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  <!-- Update Username Modal -->
  <div class="modal fade" id="updateUsernameModal" tabindex="-1" role="dialog" aria-labelledby="updateUsernameModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateUsernameModalLabel">修改用户名</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="updateUsernameForm">
            <div class="form-group">
              <label for="newUsername">新用户名</label>
              <input type="text" class="form-control" id="newUsername" placeholder="Enter your new username">
            </div>
            <button type="submit" class="btn btn-primary">修改用户名</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Update Email Modal -->
  <div class="modal fade" id="updateEmailModal" tabindex="-1" role="dialog" aria-labelledby="updateEmailModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateEmailModalLabel">修改邮箱</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="updateEmailForm">
            <div class="form-group">
              <label for="newEmail">新邮箱</label>
              <input type="email" class="form-control" id="newEmail" placeholder="Enter your new email">
            </div>
            <button type="submit" class="btn btn-primary">修改邮箱</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Update Password Modal -->
  <div class="modal fade" id="updatePasswordModal" tabindex="-1" role="dialog" aria-labelledby="updatePasswordModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updatePasswordModalLabel">修改密码</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="updatePasswordForm">
            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" class="form-control" id="newPassword" placeholder="Enter your new password">
            </div>
            <button type="submit" class="btn btn-primary">修改密码</button>
          </form>
        </div>
      </div>
    </div>
  </div>
    <!-- Add City Modal -->
    <div class="modal fade" id="addCityModal" tabindex="-1" role="dialog" aria-labelledby="addCityModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addCityModalLabel">添加关注城市</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="addCityForm">
              <div class="form-group">
                <label for="newCity">城市名称</label>
                <input type="text" class="form-control" id="newCity" placeholder="Enter city name">
              </div>
              <button type="submit" class="btn btn-primary">添加</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除城市模态框 -->
    <div class="modal fade" id="removeCityModal" tabindex="-1" role="dialog" aria-labelledby="removeCityModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="removeCityModalLabel">删除关注城市</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- 城市列表将通过 JavaScript 动态生成 -->
            <form id="removeCitiesForm">
              <!-- 城市复选框列表将在这里动态生成 -->
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirmRemoveCities">确认删除</button>
          </div>
        </div>
      </div>
    </div>
  <footer class="sticky-footer">
    <div class="container">
      <div class="text-center">
        <small style="color: #abdde5;">第五组+全国天气可视化分析平台</small>
      </div>
    </div>
  </footer>

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fa fa-angle-up"></i>
  </a>
        <!-- Logout Modal-->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"></h5>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">确定退出系统吗？</div>
            <div class="modal-footer">
              <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
              <a class="btn btn-primary" href="/loginOut">确定</a>
            </div>
          </div>
        </div>
        </div>
  <!-- Bootstrap core JavaScript-->
  <script src="/static/vendor/jquery/jquery.min.js"></script>
  <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
  <!-- Custom scripts for all pages-->
  <script src="/static/js/sb-admin.min.js"></script>
  <!-- Additional scripts -->
  <script src="../static/js/echarts.min.js"></script>
  <script src="../static/js/map/china.js"></script>
  <script>
    $(document).ready(function () {
    // 页面加载完成后获取当前用户信息并填充表单
    $.ajax({
      type: "GET",
      url: "/get_user_info",
      dataType: "json",
      success: function (data) {
        $("#username-display").text(data.username);
        $("#email-display").text(data.email);
        $("#password-display").text(data.password); // 显示密码（星号）
      },
      error: function (xhr, status, error) {
        console.error("Failed to fetch user info:", error);
      }
    });

      // 监听修改用户名按钮点击事件
      $("#modifyUsername").click(function () {
        $("#updateUsernameModal").modal("show");
      });

      // 监听修改用户名表单提交事件
      $("#updateUsernameForm").submit(function (event) {
        event.preventDefault();
        var newUsername = $("#newUsername").val();
        $.ajax({
          type: "POST",
          url: "/update_username",
          data: JSON.stringify({ newUsername: newUsername }),
          contentType: "application/json",
          success: function (response) {
            console.log("Username updated successfully:", response);
            $("#updateUsernameModal").modal("hide");
            $("#username-display").text(newUsername);
          },
          error: function (xhr, status, error) {
            console.error("Failed to update username:", error);
          }
        });
      });

      // 监听修改邮箱按钮点击事件
      $("#modifyEmail").click(function () {
        $("#updateEmailModal").modal("show");
      });

      // 监听修改邮箱表单提交事件
      $("#updateEmailForm").submit(function (event) {
        event.preventDefault();
        var newEmail = $("#newEmail").val();
        $.ajax({
          type: "POST",
          url: "/update_email",
          data: JSON.stringify({ newEmail: newEmail }),
          contentType: "application/json",
          success: function (response) {
            console.log("Email updated successfully:", response);
            $("#updateEmailModal").modal("hide");
            $("#email-display").text(newEmail);
          },
          error: function (xhr, status, error) {
            console.error("Failed to update email:", error);
          }
        });
      });

      // 监听修改密码按钮点击事件
      $("#modifyPassword").click(function () {
        $("#updatePasswordModal").modal("show");
      });

      // 监听修改密码表单提交事件
      $("#updatePasswordForm").submit(function (event) {
        event.preventDefault();
        var newPassword = $("#newPassword").val();
        $.ajax({
          type: "POST",
          url: "/update_password",
          data: JSON.stringify({ newPassword: newPassword }),
          contentType: "application/json",
          success: function (response) {
            console.log("Password updated successfully:", response);
            $("#updatePasswordModal").modal("hide");
          },
          error: function (xhr, status, error) {
            console.error("Failed to update password:", error);
          }
        });
      });
       // 初始化我关注的城市列表
      updateCitiesDisplay();

      // 绑定添加城市的按钮事件
      $("#addCity").click(function () {
        $("#addCityModal").modal("show");
      });

      // 绑定添加城市表单的提交事件
      $("#addCityForm").submit(function (event) {
        event.preventDefault();
        var newCity = $("#newCity").val();
        if (newCity) {
          $.ajax({
            type: "POST",
            url: "/add_city",
            data: JSON.stringify({ newCity: newCity }),
            contentType: "application/json",
            success: function (response) {
              if (response.message === "城市添加成功") {
                updateCitiesDisplay(response.cities);
                $("#addCityModal").modal("hide");
              }
            },
            error: function (xhr, status, error) {
              console.error("Failed to add city:", error);
            }
          });
        }
      });
    });

    // 更新页面上显示的城市列表
    function updateCitiesDisplay(cities) {
      var citiesDisplay = $("#cities-display");
      if (cities && cities.length > 0) {
        citiesDisplay.empty();
        cities.forEach(function (city) {
          citiesDisplay.append(city + "<br>");
        });
      } else {
        citiesDisplay.text("无");
      }
    }

    // 首次加载页面时获取用户信息并更新显示
    function fetchAndUpdateUserInfo() {
      $.getJSON("/get_user_info", function (data) {
        $("#username-display").text(data.username);
        $("#email-display").text(data.email);
        $("#password-display").text("********"); // 密码显示星号
        updateCitiesDisplay(data.cities); // 显示关注的城市
      });
    }

    // 调用函数
    fetchAndUpdateUserInfo();

    // 绑定删除城市按钮事件
      $("#removeCity").click(function () {
        showRemoveCityModal();
      });

    // 显示删除城市模态框并填充城市列表
    function showRemoveCityModal() {
        // AJAX 请求获取用户关注的城市列表
        $.ajax({
            type: "GET",
            url: "/get_user_info", // 确保这个接口能返回用户关注的城市列表
            dataType: "json",
            success: function (data) {
                var cities = data.cities;
                $("#removeCityModal .modal-body").empty(); // 清空模态框内容
                if (cities && cities.length > 0) {
                    cities.forEach(function (city) {
                        $("#removeCityModal .modal-body").append(
                            '<div class="form-check"><label class="form-check-label">' +
                            '<input class="form-check-input" type="checkbox" value="' + city + '">' + city +
                            '</label></div>'
                        );
                    });
                    $("#removeCityModal").modal("show");
                } else {
                    alert("没有城市可供删除！");
                }
            },
            error: function (xhr, status, error) {
                console.error("Failed to fetch cities:", error);
            }
        });
    }

    // 绑定删除城市模态框的确认按钮事件
    $("#confirmRemoveCities").click(function () {
      var citiesToRemove = [];
      $("#removeCityModal .form-check-input:checked").each(function () {
        citiesToRemove.push($(this).val());
      });
      if (citiesToRemove.length > 0) {
        // 发送 AJAX 请求到后端删除城市
        $.ajax({
          type: "POST",
          url: "/remove_city",
          data: JSON.stringify({ citiesToRemove: citiesToRemove }),
          contentType: "application/json",
          success: function (response) {
            if (response.message === "删除成功") {
              updateCitiesDisplay(response.cities);
              $("#removeCityModal").modal("hide");
            }
          },
          error: function (xhr, status, error) {
            console.error("Failed to remove cities:", error);
          }
        });
      }
    });
  </script>
</body>
</html>
